<style scoped>
    ul li{
       list-style: none; 
    }
</style>
<template>
	<div style="margin: 20px;">
        <div>
            <Row style="margin-bottom: 25px;">
                <Col span="8">登录名：
                	<Input v-model="name" placeholder="请输入..." style="width:200px"></Input>
                </Col>
                <Col span="8"><Button type="primary" shape="circle" icon="ios-search" @click="search()">搜索</Button></Col>
            </Row>
        </div>            
        <div>
            <ul>
                <li>
                    <Button type="primary" icon="plus-round" @click="openNewModal()">新建</Button>
                    <Button type="success" icon="wrench" @click="openModifyModal()">修改</Button>
                    <Button type="error" icon="trash-a" @click="del()">删除</Button>
                </li>
                <li>
                    <div style="padding: 10px 0;">
                        <Table border :columns="columns1" :data="data1" height="300" @on-selection-change="s=>{change(s)}" @on-row-dblclick="s=>{dblclick(s)}"></Table>
                    </div>
                </li>
                <li>
                    <div style="text-align: right;">
                        <Page :total="total" :page-size="pageInfo.pageSize" show-elevator show-total @on-change="e=>{pageSearch(e)}"></Page>
                    </div>  
                </li>
            </ul>
        </div>
        <!--添加modal-->  
        <Modal :mask-closable="false" :visible.sync="newModal" :loading = "loading" v-model="newModal" width="600" title="新建" @on-ok="newOk('moneyNew')" @on-cancel="cancel()">
            <Form ref="moneyNew" :model="moneyNew" :label-width="80" >
                <Row>
                    <Col span="12">
                        <Form-item label="人员:" prop="name">
                            <Input v-model="moneyNew.name" style="width: 204px"/>
                        </Form-item>
                    </Col>
                    <Col span="12">
                        <Form-item label="部门:" prop="department">
                            <Input v-model="moneyNew.department" style="width: 204px"/>
                        </Form-item>
                    </Col>
                    <Col span="12">
                        <Form-item label="绩效:" prop="money">
                            <Input v-model="moneyNew.money" style="width: 204px"/>
                        </Form-item>
                    </Col>
                </Row>
            </Form>
        </Modal>
        <!--修改modal-->  
       <Modal :mask-closable="false" :visible.sync="modifyModal" :loading = "loading" v-model="modifyModal" width="600" title="修改" @on-ok="modifyOk('moneyModify')" @on-cancel="cancel()">
             <Form ref="moneyModify" :model="moneyModify" :label-width="80" >
                <Row>
                    <Col span="12">
                        <Form-item label="人员:" prop="name">
                            <Input v-model="moneyModify.name" style="width: 204px"/>
                        </Form-item>
                    </Col>
                    <Col span="12">
                        <Form-item label="部门:" prop="department">
                            <Input v-model="moneyModify.department" style="width: 204px"/>
                        </Form-item>
                    </Col>
                    <Col span="12">
                        <Form-item label="绩效:" prop="money">
                            <Input v-model="moneyModify.money" style="width: 204px"/>
                        </Form-item>
                    </Col>
                </Row>
            </Form>
        </Modal>
        <!--配置角色modal-->
       <!-- <Modal v-model="roleModal" width="500" title="角色配置" @on-ok="roleOk()" @on-cancel="cancel()">
            <div>
                <Table border :columns="columns2" :data="data2" :height="260"  @on-selection-change="s=>{change2(s)}"></Table>
            </div>
        </Modal>--> 

    </div>
</template>
<script>
	export default {
        data () {
            return {
                id:null,
                /*用于查找的登录名*/
                name:null,
            	/*选择的数量*/
                count:null,
            	/*选中的组数据*/
                groupId:null,
            	/*新建modal的显示参数*/
                newModal:false,
                /*修改modal的显示参数*/
                modifyModal:false,
                /*角色配置modal的显示参数*/
                roleModal:false,
            	/*分页total属性绑定值*/
                total:0,
                /*loading*/
                loading: true,
                /*pageInfo实体*/
                pageInfo:{
                	page:0,
                	pageSize:10
                },
                /*money实体*/
                money:{
                    id:null,
                    name:null,
                    department:null,
                    money:null,
                    delete:null
                },
                /*用于添加的money实体*/
                moneyNew:{
                	id:null,
					name:null,
					department:null,
                    money:null,
                    delete:null
                },
                /*用于修改的money实体*/
                moneyModify:{
                	id:null,
					name:null,
					department:null,
                    money:null,
                    delete:null
                },
               
            	/*表显示字段*/
            	columns1: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '人员',
                        key: 'name'
                    },
                    {
                        title: '部门',
                        key: 'department'
                    },
                    {
                        title: '绩效',
                        key: 'money'
                    },
                    
                ],
                /*表数据*/
                data1: [],
                /*表显示字段*/
                columns2: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '角色名称',
                        width: 120,
                        key: 'name'
                    },
                    {
                        title: '描述',
                        key: 'describe'
                    }
                ],
                /*表数据*/
                data2:[],
                /*data2的临时存储*/
                data2Temp:[],
                /*用户与角色关系列表*/
                relationList:null
            }
        },
        mounted(){
        	/*页面初始化调用方法*/
            this.getTable({
                "pageInfo":this.pageInfo,
                "name":this.name
            });
            this.axios({
              method: 'get',
              url: '/roles/all'
            }).then(function (response) {
                this.data2Temp = response.data;
            }.bind(this)).catch(function (error) {
              alert(error);
            });
        },
        methods:{
        	/*pageInfo实体初始化*/
        	initPageInfo(){
        		this.pageInfo.page = 0;
        		this.pageInfo.pageSize = 10;
        	},
            /*money实体初始化*/
            initMoney(){
                this.money.id = null;
                this.money.name = null;
                this.money.department = null;
                this.money.money = null;
            },
            /*moneyNew实体初始化*/
            initMoneyNew(){
                this.moneyNew.id = null;
                this.moneyNew.name = null;
                this.moneyNew.department = null;
                this.moneyNew.money = null;
            },
            /*moneyModify实体初始化*/
            initMoneyModify(){
                this.moneyModify.id = null;
                this.moneyModify.name = null;
                this.moneyModify.department = null;
                this.moneyModify.money = null;
            },
            /*moneyNew设置*/
            moneySet(e){
                this.money.id = e.id;
                this.money.name = e.name;
                this.money.department = e.department;
                this.money.money = e.money;
            },
            /*moneyNew设置*/
            moneyNewSet(e){
                this.moneyNew.id = e.id;
                this.moneyNew.name = e.name;
                this.moneyNew.department = e.department;
                this.moneyNew.money = e.money;
            },
            /*moneyModify设置*/
            moneyModifySet(e){
                this.moneyModify.id = e.id;
                this.moneyModify.name = e.name;
                this.moneyModify.department = e.department;
                this.moneyModify.money = e.money;
            },
            /*得到表数据*/
            getTable(e) {
                this.axios({
                  method: 'get',
                  url: '/moneys',
                  params: {
                    'page':e.pageInfo.page,
                    'pageSize':e.pageInfo.pageSize,
                    'name':e.name
                  }
                }).then(function (response) {
                    this.data1=response.data.data;
                    this.total=response.data.totalCount;
                }.bind(this)).catch(function (error) {
                  alert(error);
                });
            },
            /*搜索按钮点击事件*/
            search(){
                this.initPageInfo();
                this.getTable({
                    "pageInfo":this.pageInfo,
                    "name":this.name
                });   
            },
            /*分页点击事件*/
            pageSearch(e){
                this.pageInfo.page = e-1;
                this.getTable({  
                    "pageInfo":this.pageInfo,
                    "name":this.name
                });
            },
            /*新建点击触发事件*/
            openNewModal(){
                this.newModal = true;
                this.initMoneyNew();
                this.data1.sort();
                this.count = 0;
                this.groupId = null;
            },
            /*新建modal的newOk点击事件*/
           newOk (moneyNew) { 
                this.$refs[moneyNew].validate((valid) => {
                    if (valid) {
                        this.initMoney();
                        this.moneySet(this.moneyNew);
                        this.axios({
                            method: 'post',
                            url: '/moneys/money',
                            data: this.money
                        }).then(function (response) {
                            this.initMoneyNew();
                            this.getTable({
                                "pageInfo":this.pageInfo,
                                'id':this.id
                            });
                            this.$Message.info('新建成功');
                        }.bind(this)).catch(function (error) {
                            alert(error);
                        });  
                        this.newModal = false;
                    }else {
                        setTimeout(() => {
                            this.loading = false;
                            this.$nextTick(() => {
                                this.loading = true;
                            });
                        }, 1000);
                    }
                })
            },
            /*点击修改时判断是否只选择一个*/
            openModifyModal(){
                if(this.count > 1 || this.count < 1){
                    this.modifyModal= false; 
                    this.$Message.warning('请至少选择一项(且只能选择一项)');  
                }else{
                    this.modifyModal = true;
                }
            },
            /*修改modal的modifyOk点击事件*/
             modifyOk (moneyModify) { 
                this.$refs[moneyModify].validate((valid) => {
                    if (valid) {
                        this.initMoney();
                        this.moneySet(this.moneyModify);
                        this.axios({
                          method: 'put',
                          url: '/moneys/'+this.money.id,
                          data: this.money
                        }).then(function (response) {
                            this.initMoneyNew();
                            this.getTable({
                                "pageInfo":this.pageInfo,
                                "name":this.name
                            });
                            this.$Message.info('修改成功');
                        }.bind(this)).catch(function (error) {
                          alert(error);
                        });  
                        this.modifyModal = false;
                    }else {
                        this.$Message.error('表单验证失败!');
                        setTimeout(() => {
                            this.loading = false;
                            this.$nextTick(() => {
                                this.loading = true;
                            });
                        }, 1000);
                    }
                })
            },
            /*modal的cancel点击事件*/
            cancel () {
                this.$Message.info('点击了取消');
            },
            /*table选择后触发事件*/
            change(e){
                if(e.length==1){
                    this.moneyModifySet(e['0']);
                }
                this.setGroupId(e);              
            },
            /*通过选中的行设置groupId的值*/
            setGroupId(e){
                this.groupId=[];
                this.count=e.length;
                for (var i = 0; i <= e.length - 1; i++) {
                    this.groupId.push(e[i].id);
                }
            },
            /*删除table中选中的数据*/
            del(){
                if(this.groupId!=null && this.groupId!=""){
                    this.axios({
                      method: 'delete',
                      url: '/moneys',
                      data: this.groupId
                    }).then(function (response) {
                        this.getTable({
                            "pageInfo":this.pageInfo,
                            "name":this.name
                        });
                        this.groupId=null;
                        this.count=0;
                        this.$Message.info('删除成功');
                    }.bind(this)).catch(function (error) {
                        alert(error);
                    });
                }
            },
            /*表格中双击事件*/
            dblclick(e){
                this.moneyModifySet(e);
                this.modifyModal = true;
                this.data1.sort();
            },
            /*流程配置*/
            relationSet(e){
                this.roleModal = true;
                this.data2 = [];
                this.axios({
                  method: 'get',
                  url: '/relations/'+e.id
                }).then(function (response) {
                    var roleList = [];
                    for(var i in response.data){
                        roleList.push(response.data[i].roleId);
                    }
                    for(var i in this.data2Temp){
                        if(roleList.indexOf(this.data2Temp[i].id) == -1){
                            this.data2.push({
                                "id": this.data2Temp[i].id,
                                "name": this.data2Temp[i].name,
                                "describe": this.data2Temp[i].describe,
                                "moneyId": e.id,
                                "_checked": false
                            });
                        }else {
                            this.data2.push({
                                "id": this.data2Temp[i].id,
                                "name": this.data2Temp[i].name,
                                "describe": this.data2Temp[i].describe,
                                "moneyId": e.id,
                                "_checked": true
                            });
                        }
                    }   
                }.bind(this)).catch(function (error) {
                  alert(error);
                });
            },
            /*配置角色modal确认按钮点击事件*/
            roleOk(){
                if(this.relationList!=null){
                    this.axios({
                      method: 'post',
                      url: '/relations',
                      data: this.relationList
                    }).then(function (response) {
                        this.$Message.info('配置成功'); 
                    }.bind(this)).catch(function (error) {
                      alert(error);
                    });
                    this.relationList = null;
                }
            },
            /*配置角色modal中表选择改变事件*/
            change2(e){
                this.relationList = [];
                if(e.length == 0){
                    this.relationList.push({
                        "moneyId": this.data2[0].moneyId
                    }); 
                }
                for (var i in e) {
                    this.relationList.push({
                        "moneyId": e[i].moneyId,
                        "roleId": e[i].id
                    });  
                }
            }
        }
    }
</script>